<template>
	<view class="">


		<view class="section-card">
			<view class="call-padding">

				<u-field @click="showPatient=true" label-width='150' label="患者信息" input-align='right'
					placeholder="请选择需要服务的患者" right-icon="arrow-right">
				</u-field>
				<u-field label-width='150' v-model="nursing.date" label="服务时间" input-align='right' placeholder="请选择上门时间"
					@click="showDate=true" right-icon="arrow-right">
				</u-field>
				<u-calendar v-model="showDate" @change="changeDate" :min-date="minDate" :max-date="maxDate"
					toolTip="选择预约日期"></u-calendar>
				<u-field @click="showDoctor=true" label-width='150' label="医护人员" input-align='right'
					placeholder="请选择医护人员" right-icon="arrow-right">
				</u-field>
				<u-field label-width='150' :disabled="true" label="上门地点" input-align='right' placeholder="请选择上门地点"
					right-icon="arrow-right">
				</u-field>
				<view class="">
					<textarea class="textarea" placeholder="请输入简要的情况或者描述以便医护人员及时了解" :maxlength="200" />
				</view>

			</view>

		</view>
		<view class="section-card">
			<view class="call-padding">
				<view class="radio-box">
					<view class="pad-10-0"> <strong>是否有打针工具</strong></view>
					<view class="radio-child">
						<u-radio-group v-model="radioValue" @change="radioGroupChange">
							<u-radio @change="radioChange" active-color='rgb(53, 166, 175)'
								v-for="(item, index) in radioList3" :key="index" :name="item.name"
								:disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>

				</view>

				<view class="">
					<text class="value">打针耗材包(10元)</text>
				</view>

			</view>
		</view>
		<view class="section-card">
			<view class="call-padding">
				<view class="pad-10-0"> <strong>上传就医证明(必填)</strong></view>
				<view class="uploadBox">
					<view class="upload">
						<u-upload :action="action"></u-upload>
					</view>
					<view class="upload">
						<u-upload :action="action1"></u-upload>
					</view>
				</view>
			</view>
		</view>

		<view class="section-card">
			<view class="call-padding">
				<view class="pad-10-0"> <strong>温馨提示</strong></view>
				<view class="value">
					本服务为肌肉注射和皮下注射，不提供输液服务请确认患者对使用药品无过敏现象;
					有严重出、凝血倾向，血小板明显减少或用肝素、双香豆素等进行抗凝治疗暂禁穿刺的患者不适宜上门打针服务。
				</view>
			</view>
		</view>

		<button class="btn-confirm" @click="checkIn()">{{btnText}}</button>

		<u-select v-model="showPatient" :list="patientList" @confirm="confirm($event,'currPatient')"></u-select>
		<u-select v-model="showDoctor" :list="docList" @confirm="confirm($event,'currDoctor')"></u-select>
	</view>

</template>

<script>
	import {
		dateFormat
	} from '@/utils/assist'
	export default {
		data() {
			return {
				nursingItem: [{
					name: '家庭护理出诊费(含保险)',
					price: '128.00'
				}, {
					name: '交通费',
					price: '30.00'
				}, {
					name: '耗材费',
					price: '7.50'
				}, ],
				radioValue: '有',
				nursing: {
					patient: '',
					doctor: '',
					date: '',
					addr: '',
					memo: ''
				},
				showDate: false,
				showPatient: false,
				minDate: dateFormat("yyyy-MM-dd", new Date()),
				showDoctor: false,
				cost: 175,
				radioList3: [{
					name: '有'
				}, {
					name: '无'
				}],
				patientList: [{
					label: '张合'
				}, {
					label: '吴理'
				}],
				docList: [{
					label: '程进'
				}, {
					label: '张利'
				}],
				btnText: '提交订单'

			}
		},
		computed: {

			maxDate() {
				let date = new Date();
				date.setDate(date.getDate() + 10)
				return dateFormat("yyyy-MM-dd", date)
			},

		},
		methods: {
			radioGroupChange(e) {
				console.log(e)
			},
			changeDate(e) {
				console.log(e)
				this.nursing.date = e.result

			},
			radioChange(e) {
				if (e == '无') {
					this.cost += 10

				} else {
					this.cost -= 10
				}
				this.btnText = '合计' + this.cost + '元,提交订单'

			},
			checkIn() {
				uni.navigateTo({
					url: '/pages/Home/ServeComposite/NursingKnowAgree?code='
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.section-card {
		background: #fff;
		margin: 25rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

		border: 1px solid #e6e6e6;
		border-radius: 5px;

	}

	.textarea {
		width: 94%;
		background: #f5f9ff;
		border-radius: 12rpx;
		padding: 18rpx;
		font-size: 26rpx;
		color: #333;
		margin-top: 8rpx;
		border: none;
	}

	.call-padding {
		padding: 24rpx 32rpx 18rpx 32rpx;
	}

	.title {
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 15px;
		width: 240rpx
	}

	.radio-box {
		display: flex;
		justify-content: space-between;
	}

	.radio-child {
		margin-top: 5px;
	}

	.value {
		color: #888;
		font-size: 28rpx;
	}

	.thime-color {
		background-color: #A4F5FC;
	}

	.uploadBox {
		display: flex;
	}

	.first-title {
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
	}

	.btn-color {
		background-color: #A4F5FC;
	}

	.line-btn {
		background: #fff;
		color: #1ec6e6;
		border: 1rpx solid #1ec6e6;
		text-align: center;
	}

	.thime-btn {
		margin-top: 20px;
		width: 40%;
	}
</style>